<template>
  <div class="articleList bg-gray-200 p-3">
    <template v-for="item in 10" :key="item">
      <div class="articleItem w-full bg-white mb-5 p-3">
        <div class="item-title flex items-center mb-1.5">
          <!-- 文章标题 -->
          <span class="title w-5/6"
            >这是个测试这是个测试这是个测试这是个测试这是个测试这是个这是个测试这是个测试测试
          </span>
          <!-- 点赞与评论 -->
          <div class="viewAndcomment flex w-1/6">
            <!-- 评论 -->
            <div class="w-1/2 mr-3 flex items-center">
              <Icon color="gray" size="14">
                <ChatbubbleEllipsesOutline />
              </Icon>
              <span class="ml-1">222</span>
            </div>
            <!-- 点赞 -->
            <div class="w-1/2 flex items-center">
              <Icon color="gray" size="14">
                <ThumbsUpOutline />
              </Icon>
              <span class="ml-1">222</span>
            </div>
          </div>
        </div>
        <div class="item-text w-full mb-2">
          <p>
            这个是测试内这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容这个是测试内容容
          </p>
        </div>
        <div class="item-bottom flex items-center">
          <div class="publish-people flex items-center mr-3">
            <Icon color="gray" size="14">
              <PersonOutline />
            </Icon>
            <span class="ml-1">张颖</span>
          </div>
          <div class="tags">
            <TagsList :listData="tagsList" />
          </div>
          <div class="time"></div>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
import {
  ThumbsUpOutline as ThumbsUpOutline,
  ChatbubbleEllipsesOutline as ChatbubbleEllipsesOutline,
  PersonOutline as PersonOutline,
} from "@vicons/ionicons5";
import TagsList from "@/components/publicComponents/tagsList.vue";

import { ref } from "@vue/runtime-core";

const tagsList = ref(["vue", "react", "java", "css3", "组件化"]);
</script>
<style lang="scss" scoped>
.articleList {
  min-width: 600px;

  .articleItem {
  }
}
.item-title {
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 30px;
  }
  .viewAndcomment {
    div {
      span {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
